<template>
  <div class="contact">
    <div class="contact-left">
      <div class="contact-list-title">我加入的群组</div>
      <div class="group-list">
        <div
          v-for="(group, key) in groupList || []" :key="key" class="group-item"
          :class="{actived: profile.group && profile.group.groupId === group.groupId}"
          v-if="group.businessId!==currentUser.id"
          @click="showGroupProfile(group)"
        >
          <div class="group-avatar">
            <img :src="group.headImage"/>
          </div>
          <div class="group-name">{{ group.groupName }}</div>
        </div>
      </div>

      <div class="contact-list-title">我管理的群组</div>
      <div class="group-list" >
        <div
          v-for="(group, key) in groupList || []" :key="key" class="group-item"
          :class="{actived: profile.group && profile.group.groupId === group.groupId}"
          v-if="group.businessId===currentUser.id"
          @click="showGroupProfile(group)"
        >
          <div class="group-avatar">
            <img :src="group.headImage"/>
          </div>
          <div class="group-name">{{ group.groupName }}</div>
        </div>
      </div>

      <div class="contact-list-title">好友</div>
      <div class="friend-list">
        <div
          v-for="(friend, key) in friendList || []" :key="key" class="friend-item"
          :class="{actived: profile.friend && profile.friend.id === friend.id}"
          @click="showFriendProfile(friend)"
        >
          <div class="friend-avatar">
            <img :src="friend.headImage"/>
          </div>
          <div class="friend">
            <div class="friend-name">{{ friend.nickName }}</div>
            <div class="friend-mail">{{ friend.email }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="contact-main">
      <div class="profile-card" v-if="profile.friend">
        <div class="profile-card-title">
          <div class="profile-name">
            <i class="iconfont icon-zhanghu"></i>
            <div>{{ profile.friend.nickName }}</div>
          </div>
          <div class="profile-avatar">
            <img :src="profile.friend.headImage"/>
          </div>
        </div>
        <div class="friend-info">
          <div class="info-name">邮 箱</div>
          <div class="info-text">{{ systemUser.email }}</div>
        </div>
        <div class="friend-info">
          <div class="info-name">手 机</div>
          <div class="info-text">{{ systemUser.phone }}</div>
        </div>
        <div class="button-box">
          <button class="card-button" @click="privateChat">发消息</button>
        </div>
      </div>
      <div class="profile-card" v-if="profile.group">
        <div class="group-profile-name">
          <el-button class="button-box-top" @click="rollback()"><</el-button>
          <span>{{ profile.group.groupName }}({{ userList.length }})</span>
          <span v-if="profile.group.businessId===currentUser.id" class="card-button-qun" @click="requestMessage(profile.group.groupId)">群管理消息</span>
        </div>
        <div class="group-members" v-show="manage==1">
          <div class="member" v-for="(member, index) in userList" :key="index" >
            <img class="member-avatar" :src="member.headImage"/>
            <span class="member-name">{{ member.nickName }}</span>
          </div>
        </div>

        <div class="group-members" v-show="manage==2">

          <el-table :data="groupUserList" >
            <el-table-column label="昵称" align="center" prop="nickName" />
            <el-table-column label="头像" align="center" prop="headImage" width="100">
              <template slot-scope="scope">
                <image-preview :src="scope.row.headImage" :width="50" :height="50"/>
              </template>
            </el-table-column>
            <el-table-column label="信息" align="center" prop="message">
              <template>
                申请进群
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="agree(scope.row.groupId,scope.row.id,scope.row.groupStatus=1)"
                >同意</el-button>
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="agree(scope.row.groupId,scope.row.id,scope.row.groupStatus=2)"
                >拒绝</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="button-box">
          <button class="card-button" @click="groupChat">发消息</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {getAllUser, getGroupUserList, updateGroupUsers} from "@/api/chat/user";
  import {getGroupUser} from "../../../api/chat/user";
  import {getGroupUsers} from "../../../api/chat/group";
import info from "@/views/logistics/info";


  export default {
    props:["currentUser","systemUser"]
    ,
    data() {
      return {
        friendList:[],
        friends: [],
        groupList:[],
        userList:[],
        groupUserList:[],
        manage:"1",
        groups: [
        /*  {
          "id": "group-a42b-47b2-bb1e-15e0f5f9a19a",
          "name": "小程序交流群",
          "avatar": "/static/images/wx.png",
          "userList": ["08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a", "3bb179af-bcc5-4fe0-9dac-c05688484649", "fdee46b0-4b01-4590-bdba-6586d7617f95", "33c3693b-dbb0-4bc9-99c6-fa77b9eb763f"],
          "members": [{
            "id": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
            "name": "Mattie",
            "password": "123",
            "avatar": "/static/images/Avatar-1.png",
            "email": "Mattie@goeasy.io",
            "phone": "138xxxxxxxx"
          }, {
            "id": "3bb179af-bcc5-4fe0-9dac-c05688484649",
            "name": "Wallace",
            "password": "123",
            "avatar": "http://192.168.8.247:9300/statics/2023/07/24/5_20230724130842A017.jpg",
            "email": "Wallace@goeasy.io",
            "phone": "138xxxxxxxx"
          }, {
            "id": "fdee46b0-4b01-4590-bdba-6586d7617f95",
            "name": "Tracy",
            "password": "123",
            "avatar": "/static/images/Avatar-3.png",
            "email": "Tracy@goeasy.io",
            "phone": "138xxxxxxxx"
          }, {
            "id": "33c3693b-dbb0-4bc9-99c6-fa77b9eb763f",
            "name": "Juanita",
            "password": "123",
            "avatar": "/static/images/Avatar-4.png",
            "email": "Juanita@goeasy.io",
            "phone": "138xxxxxxxx"
          }]
        }, {
          "id": "group-dbb0-4bc9-99c6-fa77b9eb763f",
          "name": "GoEasy交流群",
          "avatar": "/static/images/goeasy.jpeg",
          "userList": ["08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a", "3bb179af-bcc5-4fe0-9dac-c05688484649"],
          "members": [{
            "id": "08c0a6ec-a42b-47b2-bb1e-15e0f5f9a19a",
            "name": "Mattie",
            "password": "123",
            "avatar": "/static/images/Avatar-1.png",
            "email": "Mattie@goeasy.io",
            "phone": "138xxxxxxxx"
          }, {
            "id": "3bb179af-bcc5-4fe0-9dac-c05688484649",
            "name": "Wallace",
            "password": "123",
            "avatar": "http://192.168.8.247:9300/statics/2023/07/24/5_20230724130842A017.jpg",
            "email": "Wallace@goeasy.io",
            "phone": "138xxxxxxxx"
          }]
        }*/],
        profile: {
          friend: null,
          group: null
        },
      };
    },
    mounted() {

    },
    created() {
      this.select_friend()
      this.select_group()
    },
    methods: {
      //回到上一个页面
      rollback(){
        this.manage="1"
        console.info(6666)
        console.info(this.systemUser)
      },
      //群主是否同意用户加群
      agree(groupId,id,groupStatus){
        console.info(7777)

        console.info(groupId,id,groupStatus)
        updateGroupUsers(groupId,id,groupStatus).then(response =>{
          this.testaa = response.data
          this.requestMessage(groupId)
          this.select_group_user(groupId)
          console.info(123)
        })
      },
      //根据群主查询申请群的用户
      requestMessage(groupId){
        getGroupUserList(groupId).then(response =>{
          this.groupUserList = response.data;
          this.manage="2";
          console.info(5555)
          console.info(this.groupUserList)
        })
      },

      //获取群成员
      select_group_user(groupId){
        getGroupUsers(groupId).then(response =>{
          this.userList = response.data;

          console.info(this.userList)
        })
      },


      //获取用户群组
      select_group(){
        getGroupUser(this.currentUser.id).then(response =>{
          this.groupList = response.data;
        })
      },
      //获取好友
      select_friend(){
         getAllUser(this.currentUser.id,1).then(response => {
           this.friendList = response.data;
         })
      },

      showFriendProfile(friend) {
        this.profile.group = null;
        this.profile.friend = friend;
      },
      showGroupProfile(group) {
        this.profile.friend = null;
        this.profile.group = group;
        this.select_group_user(group.groupId);
      },
      privateChat() {
        //向父组件传值（好友信息），然后通过父组件动态组件切换子组件
        this.$emit('chatFriend',this.profile.friend)
        // this.$router.replace({
        //   path: '/conversations/privatechat/' + this.profile.friend.id,
        //   query: {
        //     name: this.profile.friend.name,
        //     avatar: this.profile.friend.avatar
        //   }
        // });
      },
      groupChat() {
        //向父组件传值（好友信息），然后通过父组件动态组件切换子组件
        console.info("群："+this.profile.group.groupName)
        this.$emit('chatGroup',this.profile.group)
        // this.$router.replace({
        //   path: '/conversations/privatechat/' + this.profile.friend.id,
        //   query: {
        //     name: this.profile.friend.name,
        //     avatar: this.profile.friend.avatar
        //   }
        // });
      }
    },
  };
</script>

<style scoped>
  .contact {
    width: 100%;
    height: 100%;
    display: flex;
    background: #F7F7F7;
    color: #333333;
  }

  .contact-left {
    width: 220px;
    height: 100%;
    border-right: #dbd6d6 1px solid;
  }

  .contact-list-title {
    margin: 10px 20px;
    font-size: 14px;
  }

  .friend-list {
    display: flex;
    flex-direction: column;
  }

  .group-list {
    display: flex;
    flex-direction: column;
  }

  .actived {
    background: #52a8d9;
    border-radius: 10px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1);
  }

  .friend-item {
    display: flex;
    padding: 5px 10px;
    cursor: pointer;
  }

  .friend-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 10%;
    margin-left: 10px;
  }

  .friend {
    width: 65%;
    margin: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    padding-left: 10px;
  }

  .friend-name {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
  }

  .friend-mail {
    line-height: 21px;
    color: #888888;
  }

  .group-item {
    display: flex;
    padding: 5px 10px;
    cursor: pointer;
    align-items: center;
  }

  .group-avatar {
    width: 40px;
    height: 40px;
    margin-left: 10px;
  }

  .group-avatar img {
    width: 40px;
    height: 40px;
  }

  .group-name {
    margin-left: 10px;
    width: 160px;
    text-align: left;
    font-size: 14px;
    line-height: 40px;
  }

  .contact-main {
    flex: 1;
    background: #FFFFFF;
  }

  .profile-card {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .profile-card-title {
    flex: 1;
    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .profile-name {
    width: 300px;
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .icon-zhanghu {
    font-size: 26px;
    color: #eeeeee;
    margin-right: 10px;
  }

  .profile-avatar {
    width: 80px;
  }

  .profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 10%;
  }

  .friend-info {
    padding: 10px 30px;
    display: flex;
    justify-content: space-around;
    text-align: left;
    font-size: 14px;
    line-height: 45px;
  }

  .info-name {
    width: 100px;
  }

  .info-text {
    width: 200px;
  }

  .group-profile-name {
    position: relative;
    font-size: 18px;
    padding: 20px 70px;
    border-bottom: 1px solid #eeeeee;
  }

  .group-members {
    width: 400px;
    min-height: 200px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
  }

  .group-members .member {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;

  }

  .group-members .member-avatar {
    width: 58px;
    margin-top: 20px;
    border-radius: 5%;
  }

  .group-members .member-name {
    color: gray;
    margin-top: 10px;
    font-size: 12px;
  }

  .button-box {
    padding: 40px 0;
  }

  .card-button {
    background: #eeeeee;
    color: #000000;
    font-size: 14px;
    border: none;
    display: flex;
    width: 120px;
    height: 35px;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
  }

  .card-button-qun{
    background: #eeeeee;
    color: #000000;
    font-size: 14px;
    text-align: center;
    border: none;
    display: inline-block;
    width: 120px;
    height: 35px;
    cursor: pointer;
    border-radius: 5px;
    line-height: 35px;
    position: absolute;
    right: 20px;
    top: 14px;
  }
  .button-box-top{
    position: absolute;
    left: 10px;
    border: 0px;
    top: 14px;
  }
</style>
